<!-- RecursiveMenu.vue -->
<template>
  <div class="RecursiveMenu">
    <el-sub-menu :index="item.url + ''" v-for="item in menuItems" :key="item.id">
      <template #title>
        <div>
          <div class="menu-link menu-link2" v-show="item.rank == 2" @click=""
            :class="routeSubset == item.url ? 'menu-opt' : ''">
            <router-link :to="item.url">

              {{ item.text }} 
            </router-link>
          </div>
          <div class="menu-link menu-link1 " style="width: 200px;" v-show="item.rank == 1">
            <router-link :to="item.url">
              <div class="flex-items muli" :class="opt == item.url ? 'menu-opt-f' : ''">
                <img class="mu-icon " :src="opt == item.url ? item.imgOpt : item.img" />
                {{ item.text }}
              </div>
            </router-link>
          </div>
        </div>

      </template>
      <!-- 递归调用子菜单 -->
      <recursive-menu v-if="item.list" :menu-items="item.list"></recursive-menu>
      <!-- 如果存在分组，则渲染分组 -->
      <el-menu-item-group v-else-if="item.items" v-for="(group, index) in item.items" :key="index" :title="group.title">
        <el-menu-item v-for="subItem in group.items" :index="subItem.id" :key="subItem.id">{{ subItem.text
        }}</el-menu-item>
      </el-menu-item-group>
      <!-- 如果没有子菜单或分组，则渲染单个菜单项 -->
      <!-- <el-menu-item v-else :index="item.id">{{ item.text }}</el-menu-item> -->
    </el-sub-menu>
  </div>
</template>
  
<script>
export default {
  props: {
    menuItems: {
      type: Array,
    },
    menuArr: {
      type: Array,
    }
  },
  data() {
    return {
      opt: '',
      routeSubset: '1',
      navigation: [
        { id: 1, text: "首页", num: 0, img: './img/nul1.png', imgOpt: './img/nulo1.png', url: '/home', list: [], rank: 1, },
        { id: 2, text: "电台管理", num: 0, img: './img/nul2.png', imgOpt: './img/nulo2.png', url: '/control', list: [], rank: 1 },
        { id: 3, text: "连续探测", num: 3, img: './img/nul3.png', imgOpt: './img/nulo3.png', url: '/continuous', rank: 1, list: [{ id: 6, text: '连续探测频率表设置', url: '/detect', list: [], rank: 2 }, { id: 7, text: '连续探测结果生成', url: '/detectResult', list: [], rank: 2 }, { id: 8, text: '时段最优文件列表查询', url: '/detectResultTime', list: [], rank: 2 }] },
        { id: 4, text: "选频探测", num: 2, img: './img/nul3.png', imgOpt: './img/nulo3.png', url: '/frequencySelecting', rank: 1, list: [{ id: 9, text: '选频率探测列表', url: '/detectSelect', list: [], rank: 2 }, { id: 10, text: '选频结果查询', url: '/detectSelectResult', list: [], rank: 2 }, { id: 11, text: '时段最优文件列表查询', url: '/detectSelectResultTime', list: [], rank: 2 }] },
        { id: 5, text: "公共服务", num: 3, img: './img/nul4.png', imgOpt: './img/nulo4.png', url: '/public', rank: 1, list: [{ id: 12, text: '定时传输服务', url: '/serveTiming', list: [], rank: 2 }, { id: 13, text: '实时传输服务', url: '/serveRealTime', list: [], rank: 2 }] }
      ],
      openWatch:true,
    }
  },
  watch: {
    menuArr(newValue, oldValue) {
    },
    $route(to, from) {
      const lastRoute = to.matched[to.matched.length - 1];
        if (lastRoute) {
          this.routeSubset = lastRoute.path;
          this.findParentUrl(this.routeSubset)
          this.openWatch = false;
        }
    },

  },
  methods: {
    findParentUrl(targetUrl) {
      const parentUrl = this.findParent(this.navigation, targetUrl);
      if (parentUrl) {
        this.opt = parentUrl;
      } else {
        this.opt = this.routeSubset;
      }
    },
    findParent(navList, targetUrl, parentUrl = null) {
      for (const item of navList) {
        if (item.url === targetUrl) {
          return parentUrl;
        } else if (item.list && item.list.length > 0) {
          const result = this.findParent(item.list, targetUrl, item.url);
          if (result) {
            return result;
          }
        }
      }
      return null;
    },
  },
  mounted() {
  }

};
</script>
<style lang="less">
.RecursiveMenu {
  .el-sub-menu__icon-arrow {
    display: none;
  }

  .menu-link {
    a {
      text-decoration: none;
      color: #9A9DAA;
      cursor: pointer;
    }

    .mu-icon {
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }


  }

  .menu-opt a {
    color: #FFFFFF;
  }

  .menu-opt a::before {
    content: '\2022';
    /* 使用Unicode字符作为点的内容 */
    color: #FFFFFF;
    /* 设置点的颜色 */
    font-size: 20px;
    /* 设置点的大小 */
    margin-right: 5px;
    /* 设置点与文本之间的间距 */
  }

  .menu-link1 {
    width: 200px;
    text-align: left;
    // margin-left: 20px;

    .muli {

      // background: linear-gradient(to right, #41D4D4, #04699F);
      img {
        margin: 0 10px;
      }
    }

  }

  .menu-opt-f {
    // height: 40px;
    // line-height: 40px;
    background: linear-gradient(to right, #41D4D4, #04699F);
    color: white;

    // width: 200px;
    height: 40px;
    border-radius: 50px;

    a {
      color: white;
    }

  }


}
</style>

  